var $dlgSearch = (function(){
  var $dlg = $(''
      +'<div class="box">'
        +'<div class="line">'
            +'<div class="title">查找</div>'
            +'<div class="close">×</div>'
        +'</div>'
        +'<div class="main">'
          +'<div class="inpSearch"> '   
            +'<label for="">查找内容(N):</label>'
            +'<input class="txt-content" type="text" autofocus><br>'
          +'</div>'
          +'<div class="bigS">'
              +'<label><input type="checkbox" value="capital-sense">区分大小写(C)</label>'
          +'</div>'
          +'<fieldset class="search-direction">'
            +'<legend>方向</legend>'
            +'<label><input type="radio" name="direction" value="up">向上(U)</label>'
            +'<label><input type="radio" name="direction" value="down" checked>向下(D)</label>'
          +'</fieldset>'
          +'<input class="search-next" type="button" value="查找下一个(F)">'
          +'<input class="cancel-btn" type="button" value="取消">'
       +' </div>'
    +'</div>');


var $btnClose = $dlg.find('.close'),
    $btnCancel = $dlg.find('.cancel-btn'),
    $btnSearch = $dlg.find('.search-next'),
    $txtContent = $dlg.find('.txt-content'),
    $titleBar = $dlg.find('.line');

function destoryDlg(){$dlg.remove();}


function verify() {
    if($txtContent.val() !== '') {
      $btnSearch.removeAttr('disabled');
    } else {
      $btnSearch.attr('disabled', 'disabled');
    }
}
function init() {
    $dlg.find('.box').draggable({handle: $titleBar});
    $dlg.find('input[value="up"]').removeAttr('checked');
    $dlg.find('input[value="down"]')[0].checked = true;
    $dlg.find('input[type="checkbox"]').removeAttr('checked');
    $btnSearch.attr('disabled', 'disabled');
    $txtContent.val('');
    $txtContent.focus();
}


function show(searchHandler){ 
    //1.DOM draw
    $('body').append($dlg);
    init();
    $btnClose.click(destoryDlg);
    $btnCancel.click(destoryDlg);
    $txtContent.keyup(verify);
       
    //2.event bind
    $btnSearch.click(function(){
     searchHandler({
        content: $txtContent.val(),
        capitalSense: $dlg.find('input[type="checkbox"]:checked').val() === 'capital-sense',
        direction: $dlg.find('input[name="direction"]:checked').val()
      });
});

  }
  return {
    show:show
  };
})();
